<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		table,
		th,
		td {
			border: 1px solid #000;
		}
	</style>
</head>

<body>
	<table cellspacing="0" cellpadding="0">
		<thead>
			<tr>
				<th>序号</th>
				<th>课程名称</th>
				<th>播放</th>
				<th>弹幕</th>
				<th>评论</th>
				<th>投币</th>
				<th>收藏</th>
				<th>点赞</th>
				<th>转发</th>
				<th>链接</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table>
	<script>
		const tbody = document.querySelector('tbody')
		const req = new XMLHttpRequest()
		req.open('GET', 'http://localhost:8080/')
		req.addEventListener('readystatechange', function () {
			if (req.readyState === 4 && req.status === 200) {
				const data = JSON.parse(req.responseText)
				console.log(data)
				for (let i = 0; i < data.length; i++) {
					const tr = document.createElement('tr')
					tr.innerHTML = `
                            <td>${i + 1}</td>
							<td>${data[i].Archive.title}</td>
							<td>${data[i].stat.view}</td>
                            <td>${data[i].stat.danmaku}</td>
                            <td>${data[i].stat.reply}</td>
                            <td>${data[i].stat.coin}</td>
                            <td>${data[i].stat.favorite}</td>
                            <td>${data[i].stat.like}</td>
                            <td>${data[i].stat.share}</td>
                            <td>https://www.bilibili.com/video/${data[i].Archive.bvid}</td>
						`
					tbody.appendChild(tr)
				}
			}
		})
		req.send()
	</script>
</body>

</html>